<template>
	<uni-swipe-action>
		<uni-swipe-action-item 
			:right-options="options" 
			@click="onClick" 
			@change="swipeChange" 
		>
			<view class="cartItem" :style="cartItemStyle">
				<view class="cartItemLeft" :style="{width: showRadio ? '70rpx' : '30rpx'}">
					<lotus-radio :selected="selected" @radioChange="onRadioChange(index)" v-if="showRadio" />
				</view>
				<view class="cartItemMiddle">
					<view class="cartItemImgWrap">
						<image class="cartItemImg" :src="imgSrc ? imgSrc : '/static/icon/product_default.png'" :style="{width: imgSize, height: imgSize}" />
						<view class="cartItemStockTextWrap" v-if="stock && stock <= 9">
							<text class="cartItemStockText">仅剩{{stock}}件</text>
						</view>
					</view>
					<view class="cartItemMiddleContent">
						<text class="two-line-title cartItemTitle">{{title}}</text>
						<text class="price">¥{{price}}</text>
					</view>
				</view>
				
				<counter :quantity="quantity" :limit="stock" class="counter" @minus="onCounterMinus" @plus="onCounterPlus" />
				
			</view>
		</uni-swipe-action-item>
	</uni-swipe-action>
</template>

<script>
	import lotusRadio from '@/components/lotus-radio/lotus-radio.vue';
	import counter from '@/components/counter/counter.vue'
	
	export default {
		props: {
			selected: {
				type: [Boolean, Number],
				default: false
			},
			imgSrc: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			stock: {
				type: Number,
				default: 99
			},
			quantity: {
				type: Number,
				default: 1
			},
			price: {
				type: Number,
				default: 0
			},
			imgSize: {
				type: String,
				default: '220rpx'
			},
			showRadio: {
				type: Boolean,
				default: true
			},
			showBorder: {
				type: Boolean,
				default: false
			}
		},
		components: {
			lotusRadio,
			counter,
		},
		data() {
			return {
				options:[{
					text: '删除',
					style: {
						backgroundColor: '#F43F26',
						width: '300rpx'
					}
				}]
			}
		},
		computed: {
			cartItemStyle() {
				if (this.showBorder) {
					return {
						borderBottomWidth: '1rpx', 
						borderBottomStyle: 'solid', 
						borderBottomColor: '#e6e6e6',
					}
				} else {
					return {}
				}
			}
		},
		methods: {
			onClick(e){
				// console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
				console.log('点击了')
			},
			swipeChange(e){
				console.log('当前状态', e)
			},
			onRadioChange(index) {
				// #ifdef H5 || MP-WEIXIN
				this.$emit('radioChange', index)
				// #endif
				
				// #ifdef APP-PLUS
				this.$emit('radioChange')
				// #endif
			},
			onCounterMinus() {
				this.$emit('minus')
			},
			onCounterPlus() {
				this.$emit('plus')
			}
		}
	}
</script>

<style>
	.cartItem {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		position: relative;
		background-color: #ffffff;
	}
	.cartItemLeft {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		width: 70rpx;
		/* background-color: pink; */
		align-items: center;
		justify-content: center;
	}
	.cartItemMiddle {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
	}
	.cartItemImgWrap {
		position: relative;
	}
	.cartItemImg {
		width: 220rpx;
		height: 220rpx;
		/* background-color: #18B566; */
	}
	.cartItemStockTextWrap {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		background-color: #686868;
		width: 220rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.cartItemStockText {
	  color: #fff;
	  fontSize: 26rpx;
		
	}
	.cartItemMiddleContent {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.cartItemTitle {
		font-size: 32rpx;
	}
	
	.counter {
	  position: absolute;
	  right: 20rpx;
		bottom: 15rpx;
	}
</style>
